<template>
  <view style="position: relative">
    <!-- 轮播图 -->
    <swiper class="swiper" :autoplay="true" circular :interval="3000" :duration="1000" @change="onSwiperChange">
      <swiper-item v-for="(item, index) in bannerList" :key="index">
        <image :src="item.image" mode="widthFix" class="swiper-image"></image>
      </swiper-item>
    </swiper>
    <!-- 自定义指示器 -->
    <view class="flex-row indicator">
      <view v-for="(item, index) in bannerList" :key="index"
            :class="['indicator-item', currentIndex === index && 's']"/>
    </view>
    <view class="flex-row arc"/>
  </view>
</template>

<script>

export default {
  name: "BannerView",
  data() {
    return {
      bannerList: [
        {image: '../../static/vip/banner_1.png'},
        {image: '../../static/vip/banner_2.png'},
        {image: '../../static/vip/banner_3.png'},
        {image: '../../static/vip/banner_4.png'},
        {image: '../../static/vip/banner_5.png'}
      ],
      // 当前轮播图的索引
      currentIndex: 0
    };
  },
  methods: {
    // 监听轮播图切换事件
    onSwiperChange(event) {
      this.currentIndex = event.detail.current;
    }
  }
}
</script>

<style lang="scss">
.swiper {
  width: 100%;
  height: 520upx;
}

.swiper-image {
  width: 100%;
}

/* 自定义指示器容器 */
.indicator {
  z-index: 1;
  position: absolute;
  top: 372upx;
  left: 41upx;
  /* 指示器小圆点 */
  .indicator-item {
    width: 10upx;
    height: 10upx;
    border-radius: 50%;
    background-color: #000000;
    opacity: 0.3;
    margin: 0 6upx;

    &.s {
      opacity: 0.9;
      background-color: #FFFFFF;
    }
  }
}

.arc {
  z-index: 1;
  position: absolute;
  width: 100vw;
  height: 110upx;
  bottom: 0;
  border-radius: 40upx 40upx 0 0;
  background-color: #FFFFFF;
}
</style>
